<template>
    <el-form-item :label="i18nt('designer.setting.hidden')">
        <div class="hidden-editor">
            <el-switch v-model="optionModel.hidden"></el-switch>

            <div class="bind" @click="dVisible=true"
                 :class="{'bindData':optionModels.visible&&optionModels.visible.length>0}">
                <svg-icon icon-class="code"/>
            </div>
        </div>

        <select-model-data :selectedWidget="selectedWidget"
                           :visible.sync="dVisible"
                           keyType="visible"
                           :designer="designer">
        </select-model-data>
    </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"
import SvgIcon from "@/components/svg-icon/index.vue";
import SelectModelData from "@/components/form-designer/config-common/select-model-data/select-model-data.vue";

export default {
    name: "hidden-editor",
    components: {SelectModelData, SvgIcon},
    mixins: [i18n],
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options
        }
    },
    data() {
        return {
            dVisible: false
        }
    }
}
</script>

<style scoped lang="scss">
.hidden-editor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  .bind {
    cursor: pointer;
  }

  .bindData {
    background: $--color-primary;
    color: white;
    border-radius: 4px;
  }
}
</style>
